<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 选择器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        /* 演示用样式 */
        .demo {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .demo-element {
            padding: 10px;
            margin: 5px;
            background-color: #e0f0ff;
            border: 1px solid #99ccff;
            border-radius: 3px;
        }
        .demo-element:hover {
            background-color: #cce6ff;
        }
        .demo-element:nth-child(odd) {
            background-color: #f0f8ff;
        }
        .demo-element:nth-child(even) {
            background-color: #e6f2ff;
        }
    </style>
</head>
<body>
    <nav>
        <a href="index.html">首页</a>
        <a href="css3-selectors.html">CSS选择器</a>
        <a href="css3-box-model.html">盒模型</a>
        <a href="css3-layout-flexbox.html">Flexbox布局</a>
        <a href="css3-layout-grid.html">Grid布局</a>
        <a href="css3-colors-gradients.html">颜色与渐变</a>
        <a href="css3-transforms.html">变换</a>
        <a href="css3-transitions-animations.html">过渡与动画</a>
        <a href="css3-responsive.html">响应式设计</a>
    </nav>

    <h1>CSS3 选择器</h1>
    
    <section>
        <h2>基础选择器</h2>
        <div class="example">
            <h3>类型选择器（元素选择器）</h3>
            <div class="code">
                p {
                    color: blue;
                }
            </div>
            <p>选择所有 &lt;p&gt; 元素并应用样式。</p>
            
            <h3>类选择器</h3>
            <div class="code">
                .highlight {
                    background-color: yellow;
                }
            </div>
            <p>选择所有具有 class="highlight" 的元素。</p>
            
            <h3>ID 选择器</h3>
            <div class="code">
                #header {
                    background-color: black;
                    color: white;
                }
            </div>
            <p>选择 id="header" 的元素。</p>
            
            <h3>通用选择器</h3>
            <div class="code">
                * {
                    margin: 0;
                    padding: 0;
                }
            </div>
            <p>选择所有元素。通常用于重置样式。</p>
        </div>
        
        <div class="note">
            <p><strong>注意：</strong> ID 选择器的优先级高于类选择器，类选择器的优先级高于元素选择器。通用选择器的优先级最低。</p>
        </div>
    </section>
    
    <section>
        <h2>组合选择器</h2>
        <div class="example">
            <h3>后代选择器</h3>
            <div class="code">
                article p {
                    font-style: italic;
                }
            </div>
            <p>选择 &lt;article&gt; 元素内的所有 &lt;p&gt; 元素，无论嵌套多深。</p>
            
            <h3>子选择器</h3>
            <div class="code">
                ul > li {
                    list-style-type: square;
                }
            </div>
            <p>选择作为 &lt;ul&gt; 直接子元素的所有 &lt;li&gt; 元素。</p>
            
            <h3>相邻兄弟选择器</h3>
            <div class="code">
                h2 + p {
                    font-weight: bold;
                }
            </div>
            <p>选择紧跟在 &lt;h2&gt; 元素后的第一个 &lt;p&gt; 元素。</p>
            
            <h3>通用兄弟选择器</h3>
            <div class="code">
                h2 ~ p {
                    color: gray;
                }
            </div>
            <p>选择 &lt;h2&gt; 元素后的所有同级 &lt;p&gt; 元素。</p>
        </div>
        
        <div class="demo">
            <h3>组合选择器演示</h3>
            <div class="demo-container">
                <div class="demo-element">父元素</div>
                <div class="demo-element">
                    父元素
                    <div class="demo-element">子元素 1</div>
                    <div class="demo-element">子元素 2</div>
                </div>
                <div class="demo-element">兄弟元素 1</div>
                <div class="demo-element">兄弟元素 2</div>
            </div>
        </div>
    </section>
    
    <section>
        <h2>CSS3 新增选择器</h2>
        <div class="example">
            <h3>属性选择器</h3>
            <div class="code">
                /* 基本属性选择器 */
                [type] {
                    border: 1px solid gray;
                }
                
                /* 精确属性值选择器 */
                [type="text"] {
                    background-color: white;
                }
                
                /* 属性值包含特定词的选择器 */
                [class~="btn"] {
                    cursor: pointer;
                }
                
                /* 属性值以特定字符串开头的选择器 */
                [href^="https"] {
                    color: green;
                }
                
                /* 属性值以特定字符串结尾的选择器 */
                [src$=".jpg"] {
                    border: 2px solid black;
                }
                
                /* 属性值包含特定子字符串的选择器 */
                [title*="example"] {
                    text-decoration: underline;
                }
            </div>
            <p>属性选择器允许基于元素的属性或属性值来选择元素。</p>
            
            <h3>伪类选择器</h3>
            <div class="code">
                /* 链接状态 */
                a:link { color: blue; }
                a:visited { color: purple; }
                a:hover { color: red; }
                a:active { color: orange; }
                
                /* 结构伪类 */
                li:first-child { font-weight: bold; }
                li:last-child { font-style: italic; }
                li:nth-child(odd) { background-color: #f2f2f2; }
                li:nth-child(even) { background-color: #e6e6e6; }
                li:nth-child(3n+1) { color: red; }
                p:only-child { border: 1px solid black; }
                
                /* 表单相关 */
                input:focus { border-color: blue; }
                input:checked { box-shadow: 0 0 5px rgba(0,0,0,0.5); }
                input:disabled { background-color: #f2f2f2; }
                input:required { border-left: 3px solid red; }
                
                /* 其他 */
                p:empty { display: none; }
                div:not(.special) { color: gray; }
            </div>
            <p>伪类选择器用于选择处于特定状态的元素。</p>
            
            <h3>伪元素选择器</h3>
            <div class="code">
                p::first-line {
                    font-variant: small-caps;
                }
                
                p::first-letter {
                    font-size: 2em;
                    float: left;
                    margin-right: 5px;
                }
                
                h2::before {
                    content: "§ ";
                    color: #999;
                }
                
                h2::after {
                    content: " ⇒";
                    color: #999;
                }
                
                ::selection {
                    background-color: yellow;
                    color: black;
                }
            </div>
            <p>伪元素选择器用于选择元素的特定部分或创建不存在于DOM中的元素。</p>
        </div>
        
        <div class="note">
            <p><strong>注意：</strong> CSS3 中，伪元素应使用双冒号（::）语法，而伪类使用单冒号（:）语法。但为了兼容性，许多伪元素也接受单冒号语法。</p>
        </div>
    </section>
    
    <section>
        <h2>选择器优先级</h2>
        <div class="example">
            <h3>优先级规则</h3>
            <div class="code">
                /* 优先级从高到低 */
                #id { color: red; }                /* ID选择器 (高) */
                .class { color: green; }           /* 类选择器 (中) */
                div { color: blue; }               /* 元素选择器 (低) */
                * { color: black; }                /* 通用选择器 (最低) */
                
                /* 内联样式优先级高于所有上述选择器 */
                &lt;div style="color: purple;"&gt;内联样式&lt;/div&gt;
                
                /* !important 规则会覆盖所有其他样式 */
                p { color: red !important; }       /* 最高优先级 */
            </div>
            
            <h3>优先级计算</h3>
            <div class="code">
                /* 优先级计算方式：(ID数, 类数, 元素数) */
                #header .nav li { color: red; }    /* 优先级: (1,1,1) */
                div.menu ul li a { color: blue; }  /* 优先级: (0,1,4) */
                .menu a { color: green; }          /* 优先级: (0,1,1) */
            </div>
            <p>当多个选择器应用于同一元素时，具有更高优先级的选择器将覆盖具有较低优先级的选择器。</p>
        </div>
        
        <div class="note">
            <p><strong>最佳实践：</strong> 避免过度使用 !important，因为它会破坏样式的自然级联。相反，尝试使用更具体的选择器来解决优先级问题。</p>
        </div>
    </section>
    
    <section>
        <h2>选择器性能考虑</h2>
        <ul>
            <li>选择器从右到左解析，因此右侧应尽可能具体</li>
            <li>避免使用通用选择器（*）作为关键选择器（最右侧选择器）</li>
            <li>避免过深的后代选择器嵌套（不超过3级）</li>
            <li>优先使用类选择器，而不是复杂的选择器组合</li>
            <li>避免过度限定选择器（如 div.container 可简化为 .container）</li>
        </ul>
    </section>
    
    <footer>
        <p>&copy; 2023 CSS3 学习指南。保留所有权利。</p>
    </footer>
</body>
</html>